<template>
  <q-layout view="hHh Lpr lFf">
    <q-layout-header>
      <div class="q-toolbar row no-wrap items-center relative-position q-toolbar-normal header text-white">
        <q-btn flat dense round @click="leftDrawerOpen = !leftDrawerOpen" aria-label="Menu">
          <q-icon name="menu" />
        </q-btn>

        <q-toolbar-title>
          {{$route.meta.title}}
          <div slot="subtitle">灿谷持续集成/持续交付系统</div>
        </q-toolbar-title>
        <div class="q-mr-md">v3.0.5-gray</div>
        <q-btn flat dense round @click="rightDrawerOpen = !rightDrawerOpen" aria-label="Menu">
          <q-icon name="person" />
        </q-btn>
    </div>
    </q-layout-header>

    <q-layout-drawer v-model="leftDrawerOpen" :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null">
      <q-list no-border style="cursor:pointer">
        <q-item @click.native="$store.dispatch('frame/jump', '/')">
          <q-item-side icon="dashboard" color="secondary" />
          <q-item-main label="dashboard" />
        </q-item>
      </q-list>
      <q-list separator>
        <q-collapsible v-for="(item, i) in items" :key="i" group="somegroup" :icon="item.icon" :label="item.text"
        :opened="getIndex(item.children, $route.meta.menuId)">
          <q-list no-border link inset-delimiter>
            <q-item v-for="(child, i) in item.children" :key="i" @click.native="$store.dispatch('frame/jump', child.url)" :class="child.mendId==$route.meta.menuId ? 'bg-grey-4' : ''">
              <q-item-side inverted :icon="child.icon" color="secondary" />
              <q-item-main :label="child.label" :sublabel="child.text" />
            </q-item>
          </q-list>
        </q-collapsible>
      </q-list>
    </q-layout-drawer>

    <q-layout-drawer v-model="rightDrawerOpen" :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null" side="right" :overlay="overlay">
      <q-card inline class="bigger q-ma-sm">
        <q-card-media>
          <img src="statics/material.png" height="235">
        </q-card-media>
        <q-card-title class="relative-position">
          <q-item-tile avatar>
            <img src="statics/boy-avatar.png">
          </q-item-tile>
          <div class="ellipsis">Administrator</div>
        </q-card-title>
        <q-card-main>
        </q-card-main>
        <q-card-separator />
        <q-card-actions>
          <q-btn icon="power_settings_new" label="注销" color="negative" @click.native="$store.dispatch('frame/logout')" />
        </q-card-actions>
      </q-card>
    </q-layout-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import frameModule from '../store/frame'
export default {
  preFetch ({ store }) {
    store.registerModule('frame', frameModule)
  },
  name: 'MyLayout',
  data: function () {
    return this.$store.state.frame
  },
  methods: {
    getIndex (item, id) {
      for (let i in item) {
        if (item[i].mendId === id) {
          return true
        }
      }
    }
  },
  mounted () {
    if (this.$q.platform.is.desktop) {
      this.leftDrawerOpen = true
    }
  }
}
</script>

<style>
  .card_head{
    height:40px;
    color:#979797;
  }
  .toufu{
    line-height:0;
    font-size:14px;
  }
  .header {
    background: linear-gradient(145deg,#027be3 11%,#014a88 75%);
  }
</style>
